<template>
    <el-dialog :visible.sync="dialogVisible" @close="$emit('update:visible', false)" width="600px"
               :title="data.id == null ? $t('game.setting.domain.dialog.create') : $t('game.setting.domain.dialog.update')">
        <div class="pr-12">
            <el-form :model="dataCache" label-width="auto">
                <el-form-item :label="$t('game.setting.domain.name')" required
                              :error="Boolean(msg.errors['name']) ? msg.errors['name'][0] : ''">
                    <el-col :span="22">
                        <el-input v-model="dataCache.name"></el-input>
                    </el-col>
                </el-form-item>
                <!--中转代理-->
                <el-form-item :label="$t('game.setting.domain.config.transferProxy')" :error="error_config_transferProxy" :required="!!dataCache.config.transferProxy.length">
                    <el-row v-for="(item,index) in dataCache.config.transferProxy" :key="`transferProxy.${index}`" :class="{'mt-1':!!index}">
                        <el-col :span="22">
                            <el-input v-model="dataCache.config.transferProxy[index]"></el-input>
                        </el-col>
                        <el-col :span="2" class="text-right">
                            <el-button size="small" icon="el-icon-close" circle @click="removeItem(dataCache.config.transferProxy, index)"></el-button>
                        </el-col>
                    </el-row>
                    <el-button size="small" @click="addItem(dataCache.config.transferProxy,'')">{{ $t('action.add') }}</el-button>
                </el-form-item>
                <!--游戏授权-->
                <el-form-item :label="$t('game.setting.domain.config.cdnGateAddress')" :error="error_config_cdnGateAddress" :required="!!dataCache.config.cdnGateAddress.length">
                    <el-row v-for="(item,index) in dataCache.config.cdnGateAddress" :key="`cdnGateAddress.${index}`" :class="{'mt-1':!!index}">
                        <el-col :span="22">
                            <el-input v-model="dataCache.config.cdnGateAddress[index]"></el-input>
                        </el-col>
                        <el-col :span="2" class="text-right">
                            <el-button size="small" icon="el-icon-close" circle @click="removeItem(dataCache.config.cdnGateAddress, index)"></el-button>
                        </el-col>
                    </el-row>
                    <el-button size="small" @click="addItem(dataCache.config.cdnGateAddress,'')">{{ $t('action.add') }}</el-button>
                </el-form-item>
                <!--游戏前端-->
                <el-form-item :label="$t('game.setting.domain.config.cdnClientDomain')" :error="error_config_cdnClientDomain" :required="!!dataCache.config.cdnClientDomain.length">
                    <el-row v-for="(item,index) in dataCache.config.cdnClientDomain" :key="`cdnClientDomain.${index}`" :class="{'mt-1':!!index}">
                        <el-col :span="22">
                            <el-input v-model="dataCache.config.cdnClientDomain[index]"></el-input>
                        </el-col>
                        <el-col :span="2" class="text-right">
                            <el-button size="small" icon="el-icon-close" circle @click="removeItem(dataCache.config.cdnClientDomain, index)"></el-button>
                        </el-col>
                    </el-row>
                    <el-button size="small" @click="addItem(dataCache.config.cdnClientDomain,'')">{{ $t('action.add') }}</el-button>
                </el-form-item>
                <!--游戏后端-->
                <el-form-item :label="$t('game.setting.domain.config.cdnGameAddress.title')" :error="error_config_cdnGameAddress" :required="!!dataCache.config.cdnGameAddress.length">
                    <el-row v-for="(item,index) in dataCache.config.cdnGameAddress" :key="`cdnGameAddress.${index}`" :class="{'mt-1':!!index}">
                        <el-col :span="5">
                            <el-select :placeholder="$t('game.setting.domain.config.cdnGameAddress.protocol')" v-model="dataCache.config.cdnGameAddress[index].protocol">
                                <el-option label="ws" value="ws"></el-option>
                                <el-option label="wss" value="wss"></el-option>
                            </el-select>
                        </el-col>
                        <el-col :span="12">
                            <el-input :placeholder="$t('game.setting.domain.config.cdnGameAddress.domain')" v-model="dataCache.config.cdnGameAddress[index].domain"></el-input>
                        </el-col>
                        <el-col :span="5">
                            <el-input :placeholder="$t('game.setting.domain.config.cdnGameAddress.port')" v-model.number="dataCache.config.cdnGameAddress[index].port" type="number"></el-input>
                        </el-col>
                        <el-col :span="2" class="text-right">
                            <el-button size="small" icon="el-icon-close" circle @click="removeItem(dataCache.config.cdnGameAddress, index)"></el-button>
                        </el-col>
                    </el-row>
                    <el-button size="small" @click="addItem(dataCache.config.cdnGameAddress,cdnGameAddressItem)">{{ $t('action.add') }}</el-button>
                </el-form-item>
                <!--保存操作-->
                <el-form-item>
                    <el-button type="primary" @click="onSubmit">{{ $t('action.save') }}</el-button>
                    <el-button @click="dialogVisible = false">{{ $t('action.cancel') }}</el-button>
                </el-form-item>
            </el-form>
        </div>
    </el-dialog>
</template>

<script>
export default {
    name: "ItemUpdateOrCreate",
    props: ['visible', 'data'],
    data() {
        return {
            dialogVisible: false,
            dataCacheInit: {},
            dataCache: {
                id: null,
                name: '',
                config: {
                    transferProxy: [''],
                    cdnGateAddress: [''],
                    cdnClientDomain: [''],
                    cdnGameAddress: [{protocol: '', domain: '', port: null}],
                },
            },
            cdnGameAddressItem: {protocol: '', domain: '', port: null},
            msg: {
                code: 200,
                message: '',
                errors: {},
            }
        }
    },
    created() {
        this.dataCacheInit = _.cloneDeep(this.dataCache);
    },
    computed: {
        error_config_transferProxy: function () {
            for (let key in this.msg.errors) {
                if (_.startsWith(key, 'config.transferProxy')) {
                    return this.msg.errors[key][0];
                }
            }
        },
        error_config_cdnGateAddress: function () {
            for (let key in this.msg.errors) {
                if (_.startsWith(key, 'config.cdnGateAddress')) {
                    return this.msg.errors[key][0];
                }
            }
        },
        error_config_cdnClientDomain: function () {
            for (let key in this.msg.errors) {
                if (_.startsWith(key, 'config.cdnClientDomain')) {
                    return this.msg.errors[key][0];
                }
            }
        },
        error_config_cdnGameAddress: function () {
            for (let key in this.msg.errors) {
                if (_.startsWith(key, 'config.cdnGameAddress')) {
                    return this.msg.errors[key][0];
                }
            }
        },
    },
    watch: {
        visible: function (n, o) {
            if (n) {
                // 初始化参数
                this.initData();
                // 显示模态框
                this.dialogVisible = n;
            }
        }
    },
    methods: {
        initMsg() {
            this.msg.code = 200;
            this.msg.message = '';
            this.msg.errors = {};
        },
        initData() {
            this.initMsg();
            if (this.data.id == null) {
                this.dataCache = _.cloneDeep(this.dataCacheInit);
            } else {
                this.dataCache = _.cloneDeep(this.data);
            }
        },
        addItem(configs, item) {
            configs.push(_.cloneDeep(item));
        },
        removeItem(configs, index) {
            configs.splice(index, 1);
        },
        removeItemOrAdd(configs, index, item) {
            this.removeItem(configs, index);
            if (!configs.length) {
                this.addItem(configs, item);
            }
        },
        onSubmit() {
            this.initMsg();
            // loading 状态 start
            let loading = this.$loading();
            // 保存数据
            axios.post('/game/setting/domain/saveItem', this.dataCache).then((response) => {
                // loading 状态 close
                loading.close();
                // 逻辑处理
                if (response.data.resp_msg.code == 200) {
                    this.$message({
                        type: 'success',
                        message: this.$t('messages.succeeded', {status: this.$t('action.new')}),
                        showClose: true
                    });
                    this.dialogVisible = false;
                    // 广播事件到父组件
                    this.$emit('create');
                } else if (_.includes([42000], response.data.resp_msg.code)) {
                    this.$message({
                        type: 'error',
                        message: response.data.resp_msg.message,
                        showClose: true
                    });
                    this.msg = response.data.resp_msg;
                } else {
                    this.$message({
                        type: 'error',
                        dangerouslyUseHTMLString: true,
                        message: this.$t('messages.failed', {status: this.$t('action.new')}) + `<div class="mt-2">${response.data.resp_msg.message}</div>`,
                        showClose: true
                    });
                }
            })
        },
    }
}
</script>

<style scoped>
.el-form-item ::v-deep .el-form-item__label {
    min-width: 100px;
}
</style>
